<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>医院门诊系统管理页面</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>
<div id="app">


    <el-dialog title="编辑门诊信息" :visible.sync="dialogEditOutpatient" width="35%">

        <el-form :model="editOutpatient" >
            <el-form-item label="门诊名称" :label-width="formLabelWidth">
                <el-input v-model="editOutpatient.outpatientName" autocomplete="off" style="width: 50%"></el-input>
            </el-form-item>
            <el-form-item label="归属科室" :label-width="formLabelWidth">
                <template>
                    <el-select v-model="editOutpatient.departmentId" filterable placeholder="请选择归属科室">
                        <el-option
                                v-for="department in chooseDepartment"
                                :key="department.value"
                                :label="department.label"
                                :value="department.value">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogEditOutpatient = false">取 消</el-button>
            <el-button type="primary" @click="EditOutpatient(),dialogEditOutpatient = false">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="添加门诊信息" :visible.sync="dialogAddOutpatient" width="35%">
        <el-form :model="addOutpatient" >
            <el-form-item label="门诊名称" :label-width="formLabelWidth">
                <el-input v-model="addOutpatient.outpatientName" autocomplete="off" style="width: 50%"></el-input>
            </el-form-item>
            <el-form-item label="归属科室" :label-width="formLabelWidth">
                <template>
                    <el-select v-model="addOutpatient.departmentId" filterable placeholder="请选择归属科室">
                        <el-option
                                v-for="department in chooseDepartment"
                                :key="department.value"
                                :label="department.label"
                                :value="department.value">
                        </el-option>
                    </el-select>
                </template>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAddOutpatient = false">取 消</el-button>
            <el-button type="primary" @click="AddOutpatient(),dialogAddOutpatient = false">确 定</el-button>
        </div>
    </el-dialog>


    <el-dialog title="编辑科室信息" :visible.sync="dialogEditDepartment" width="35%">
        <el-form :model="editDepartment" >
            <el-form-item label="科室名称" :label-width="formLabelWidth">
                <el-input v-model="editDepartment.departmentName" autocomplete="off" style="width: 80%"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogEditDepartment = false">取 消</el-button>
            <el-button type="primary" @click="EditDepartment(),dialogEditDepartment = false">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="添加科室信息" :visible.sync="dialogAddDepartment" width="35%">
        <el-form :model="addDepartment" >
            <el-form-item label="科室名称" :label-width="formLabelWidth">
                <el-input v-model="addDepartment.departmentName" autocomplete="off" style="width: 80%"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAddDepartment = false">取 消</el-button>
            <el-button type="primary" @click="AddDepartment(),dialogAddDepartment = false">确 定</el-button>
        </div>
    </el-dialog>


    <el-dialog title="添加药品信息" :visible.sync="dialogAddMedication" width="35%">
        <el-form :model="addMedication" >
            <el-form-item label="药品/服务名称" :label-width="formLabelWidth">
                <el-input v-model="addMedication.medicationName" autocomplete="off" style="width: 70%"></el-input>
            </el-form-item>
            <el-form-item label="收费" :label-width="formLabelWidth">
                <el-input v-model="addMedication.charge" autocomplete="off" style="width: 20%"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAddMedication = false">取 消</el-button>
            <el-button type="primary" @click="AddMedication(),dialogAddMedication = false">确 定</el-button>
        </div>
    </el-dialog>


    <!--    医生排班编辑页面-->
    <el-dialog
            title="编辑排班"
            :visible.sync="dialogUpdateDuty"
            width="60%">
        <template>
            <div class="block">
                <span class="demonstration">选择日期&nbsp;</span>
                <el-date-picker
                        v-model="updateDate"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerUpdateDate">
                </el-date-picker>
            </div>
            <br>
            <span>时间段&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[0].startTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;至&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[0].endTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;&nbsp;&nbsp接待数量&nbsp;</span>
            <el-input v-model="dutyTime[0].totalNum" style="width: 50px"></el-input>
            <br>
            <br>
            <span>时间段&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[1].startTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;至&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[1].endTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;&nbsp;&nbsp接待数量&nbsp;</span>
            <el-input v-model="dutyTime[1].totalNum" style="width: 50px"></el-input>
            <br>
            <br>
            <span>时间段&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[2].startTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;至&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[2].endTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;&nbsp;&nbsp接待数量&nbsp;</span>
            <el-input v-model="dutyTime[2].totalNum" style="width: 50px"></el-input>
            <br>
            <br>
            <span>时间段&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[3].startTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;至&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[3].endTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;&nbsp;&nbsp接待数量&nbsp;</span>
            <el-input v-model="dutyTime[3].totalNum" style="width: 50px"></el-input>
            <br>
            <br>
            <span>时间段&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[4].startTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;至&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[4].endTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;&nbsp;&nbsp接待数量&nbsp;</span>
            <el-input v-model="dutyTime[4].totalNum" style="width: 50px"></el-input>
            <br>
            <br>
            <span>时间段&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[5].startTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;至&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[5].endTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;&nbsp;&nbsp接待数量&nbsp;</span>
            <el-input v-model="dutyTime[5].totalNum" style="width: 50px"></el-input>
            <br>
            <br>
            <span>时间段&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[6].startTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;至&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[6].endTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;&nbsp;&nbsp接待数量&nbsp;</span>
            <el-input v-model="dutyTime[6].totalNum" style="width: 50px"></el-input>
            <br>
            <br>
            <span>时间段&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[7].startTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;至&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[7].endTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;&nbsp;&nbsp接待数量&nbsp;</span>
            <el-input v-model="dutyTime[7].totalNum" style="width: 50px"></el-input>
            <br>
            <br>
            <span>时间段&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[8].startTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;至&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[8].endTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;&nbsp;&nbsp接待数量&nbsp;</span>
            <el-input v-model="dutyTime[8].totalNum" style="width: 50px"></el-input>
            <br>
            <br>
            <span>时间段&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[9].startTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;至&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[9].endTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;&nbsp;&nbsp接待数量&nbsp;</span>
            <el-input v-model="dutyTime[9].totalNum" style="width: 50px"></el-input>
            <br>
            <br>
            <span>时间段&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[10].startTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;至&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[10].endTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;&nbsp;&nbsp接待数量&nbsp;</span>
            <el-input v-model="dutyTime[10].totalNum" style="width: 50px"></el-input>
            <br>
            <br>
            <span>时间段&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[11].startTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;至&nbsp;</span>
            <el-time-picker
                    v-model="dutyTime[11].endTime"
                    :picker-options="{
      selectableRange: '8:00:00 - 17:15:00'
    }"
                    readonly
                    placeholder="任意时间点">
            </el-time-picker>
            <span>&nbsp;&nbsp;&nbsp;&nbsp接待数量&nbsp;</span>
            <el-input v-model="dutyTime[11].totalNum" style="width: 50px"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogUpdateDuty= false">取 消</el-button>
                <el-button type="primary" @click="UpdateDuty(),dialogUpdateDuty = false">确 定</el-button>
            </span>
        </template>
        <br>
    </el-dialog>

<!--    医生排班查看页面-->
    <el-dialog
            title="排班信息"
            :visible.sync="dialogSelectDuty"
            width="50%">
        <template>
            <div class="block">
                <span class="demonstration">选择日期&nbsp;</span>
                <el-date-picker
                        v-model="duty.dutyDate"
                        type="date"
                        placeholder="选择日期"
                        :picker-options="pickerSelectDate"
                @change="SelectDutyByDate">
                </el-date-picker>
            </div>
            <br>
                <el-table
                        :data="selectDuty"
                        style="width: 100%">
                    <el-table-column
                            prop="dateTime"
                            label="时间段">
                    </el-table-column>
                    <el-table-column
                            prop="totalNum"
                            label="接待数"
                            width="180">
                    </el-table-column>
                </el-table>
        </template>
        <br>
    </el-dialog>

<!--    医生信息编辑页面-->
    <el-dialog title="编辑医生信息" :visible.sync="dialogUpdateDoctor" width="35%">
        <el-form :model="updatedoctor" >
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="updatedoctor.doctorName" autocomplete="off" style="width: 30%"></el-input>
            </el-form-item>
            <el-form-item label="职位" :label-width="formLabelWidth">
                <el-input v-model="updatedoctor.position" autocomplete="off" style="width: 50%"></el-input>
            </el-form-item>
            <el-form-item label="归属门诊" :label-width="formLabelWidth">
                <el-autocomplete
                        v-model="updatedoctor.outpatientName"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="请输入内容"
                        @select="handleSelect"
                ></el-autocomplete>
            </el-form-item>
            <el-form-item label="简介" :label-width="formLabelWidth">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入内容"
                        v-model="updatedoctor.introduction">
                </el-input>
            </el-form-item>
            <el-form-item label="账号" :label-width="formLabelWidth">
                <el-input v-model="updatedoctor.userName" autocomplete="off" style="width: 40%"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="updatedoctor.passWord" autocomplete="off" style="width: 40%"></el-input>
            </el-form-item>
            <el-form-item label="收费" :label-width="formLabelWidth">
                <el-input v-model="updatedoctor.charge" autocomplete="off" style="width: 15%"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogUpdateDoctor = false">取 消</el-button>
            <el-button type="primary" @click="UpdateDoctor(),dialogUpdateDoctor = false">确 定</el-button>
        </div>
    </el-dialog>
<!--    添加医生对话框-->
    <el-dialog title="添加医生信息" :visible.sync="dialogAddDoctor" width="35%">
        <el-form :model="addDoctor" >
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="addDoctor.doctorName" autocomplete="off" style="width: 30%"></el-input>
            </el-form-item>
            <el-form-item label="职位" :label-width="formLabelWidth">
                <el-input v-model="addDoctor.position" autocomplete="off" style="width: 50%"></el-input>
            </el-form-item>
            <el-form-item label="归属门诊" :label-width="formLabelWidth">
                <el-autocomplete
                        v-model="addDoctor.outpatientName"
                        :fetch-suggestions="querySearchAsync"
                        placeholder="请输入内容"
                        @select="handleSelect"
                ></el-autocomplete>
            </el-form-item>
            <el-form-item label="简介" :label-width="formLabelWidth">
                <el-input
                        type="textarea"
                        :autosize="{ minRows: 2, maxRows: 4}"
                        placeholder="请输入内容"
                        v-model="addDoctor.introduction">
                </el-input>
            </el-form-item>
            <el-form-item label="账号" :label-width="formLabelWidth">
                <el-input v-model="addDoctor.userName" autocomplete="off" style="width: 40%"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input v-model="addDoctor.passWord" autocomplete="off" style="width: 40%"></el-input>
            </el-form-item>
            <el-form-item label="收费" :label-width="formLabelWidth">
                <el-input v-model="addDoctor.charge" autocomplete="off" style="width: 15%"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogAddDoctor = false">取 消</el-button>
            <el-button type="primary" @click="AddDoctor(),dialogAddDoctor = false">确 定</el-button>
        </div>
    </el-dialog>


    <template>
        <div>
            <h2>医院门诊系统管理页面</h2>
            <el-divider></el-divider>
        </div>
    </template>
    <template>
        <el-tabs :tab-position="tabPosition" style="height: 600px;">
            <el-tab-pane label="医生信息管理">
                <div>
                    <el-form :inline="true" :model="selectDoctor" class="demo-form-inline">
                        <el-form-item label="姓名">
                            <el-input v-model="selectDoctor.doctorName" placeholder="姓名"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="selectAllDoctorByName">查询</el-button>
                        </el-form-item>
                        <el-button type="primary" plain @click="dialogAddDoctor = true" style="float: right">新增</el-button>
                    </el-form>
                    <el-table
                            :data="doctorList"
                            style="width: 100%"
                            :row-class-name="tableRowClassName"
                            height="550px">
                        <el-table-column
                                prop="doctorName"
                                label="姓名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="position"
                                label="职位"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="outpatientName"
                                label="归属门诊">
                        </el-table-column>
                        <el-table-column
                                prop="introduction"
                                label="简介">
                        </el-table-column>
                        <el-table-column
                                prop="userName"
                                label="账号">
                        </el-table-column>
                        <el-table-column
                                prop="passWord"
                                label="密码">
                        </el-table-column>
                        <el-table-column
                                prop="charge"
                                label="收费/元">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="EditDoctor(scope.$index, scope.row),dialogUpdateDoctor = true">编辑</el-button>
                                <el-button
                                        size="mini"
                                        type="danger"
                                        @click="Deletedoctor(scope.$index, scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="值班管理">
                <el-form :inline="true" :model="selectDoctor" class="demo-form-inline">
                    <el-form-item label="姓名">
                        <el-input v-model="selectDoctor.doctorName" placeholder="姓名"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                        :data="doctorList"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        height="550px">
                    <el-table-column
                            prop="doctorName"
                            label="姓名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="position"
                            label="职位"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="outpatientName"
                            label="归属门诊">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">

                            <el-button type="primary" icon="el-icon-search"
                                       size="mini"
                                       @click="GetDuty(scope.$index, scope.row),dialogSelectDuty= true">查看排班</el-button>
                            <el-button type="primary"
                                       size="mini"
                                       @click="EditDuty(scope.$index, scope.row),dialogUpdateDuty= true">编辑排班<i class="el-icon-upload el-icon--right"></i></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="药品管理">
                <el-form :inline="true" :model="selectMedication" class="demo-form-inline">
                    <el-form-item label="药品/服务名称">
                        <el-input v-model="selectMedication.medicationName" placeholder="药品/服务名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="selectMedicationByName()">查询</el-button>
                    </el-form-item>
                    <el-button type="primary" plain @click="dialogAddMedication = true" style="float: right">新增</el-button>
                </el-form>
                <el-table
                        :data="medicationList"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        height="550px">
                    <el-table-column
                            prop="medicationName"
                            label="药品/服务名称">
                    </el-table-column>
                    <el-table-column
                            prop="charge"
                            label="收费">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="danger"
                                       size="mini"
                                       @click="DeleteMedication(scope.$index, scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="科室管理">
                <div>
                    <el-button type="primary" plain @click="dialogAddDepartment = true" style="float: right">新增</el-button>
                    <el-table
                            :data="departmentList"
                            style="width: 100%"
                            :row-class-name="tableRowClassName"
                            height="550px">
                        <el-table-column
                                prop="departmentName"
                                label="科室名称">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="getDepartmentIdAndName(scope.$index, scope.row),dialogEditDepartment = true">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-tab-pane>
            <el-tab-pane label="门诊管理">
                <div>
                    <el-button type="primary" plain @click="dialogAddOutpatient = true" style="float: right">新增</el-button>
                    <el-table
                            :data="outpatientList"
                            style="width: 100%"
                            :row-class-name="tableRowClassName"
                            height="550px">
                        <el-table-column
                                prop="outpatientName"
                                label="门诊名称">
                        </el-table-column>
                        <el-table-column
                                prop="departmentName"
                                label="科室名称">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        @click="getOutpatientId(scope.$index, scope.row),dialogEditOutpatient = true">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>

            </el-tab-pane>
        </el-tabs>
    </template>

</div>


<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script src="js/axios-0.18.0.js"></script>

<script>
    const token = localStorage.getItem('token');
    new Vue({
        el: "#app",
        mounted() {
            //当页面加载完成后,发送异步请求,获取数据
            this.selectALlOutpatient();
            this.selectAllDoctorByName();
            this.selectAllMedication()
            this.getAllDepartment()
            this.getAllOutpatientAndDepart();
            this.getChooseDepartment()
        },
        methods: {
            getChooseDepartment(){
                var _this = this
                axios({
                    method:"get",
                    url:"/department/getChooseDepartmentList",
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20041) {
                        _this.chooseDepartment = resp.data.data
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("hospitalLogin.html");
                    }else {
                        alert("失败")
                    }
                })
            },
            getAllOutpatientAndDepart(){
                var _this = this
                axios({
                    method:"get",
                    url:"/outpatient/getAllOutpatientAndDepartName",
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20041) {
                        _this.outpatientList = resp.data.data
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("hospitalLogin.html");
                    }else{
                        alert("失败")
                    }
                })
            },
            AddOutpatient(){
                var _this = this
                axios({
                    method:"post",
                    url:"/outpatient/addOutpatient",
                    data:_this.addOutpatient,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20011) {
                        _this.getAllOutpatientAndDepart()
                        _this.selectALlOutpatient()
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("hospitalLogin.html");
                    }else if(resp.data.code == 20010){
                        alert("失败")
                    }
                })
            },
            EditOutpatient(){
                var _this = this
                axios({
                    method:"post",
                    url:"/outpatient/editOutpatient",
                    data:_this.editOutpatient,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20021) {
                        _this.getAllOutpatientAndDepart()
                        _this.selectALlOutpatient()
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("hospitalLogin.html");
                    }else if(resp.data.code == 20020){
                        alert("失败")
                    }
                })
            },
            getOutpatientId(index,row){
                this.editOutpatient.outpatientId = row.outpatientId
            },
            EditDepartment(){
                var _this = this
                axios({
                    method:"post",
                    url:"/department/editDepartment",
                    data:_this.editDepartment,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20021) {
                        _this.getAllDepartment()
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("hospitalLogin.html");
                    }else if(resp.data.code == 20020){
                        alert("失败")
                    }
                })
            },
            AddDepartment(){
                var _this = this
                axios({
                    method:"post",
                    url:"/department/addDepartment",
                    data:_this.addDepartment,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20011) {
                        _this.getAllDepartment()
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("hospitalLogin.html");
                    }else if(resp.data.code == 20010){
                        alert("失败")
                    }
                })
            },
            getDepartmentIdAndName(index,row){
                this.editDepartment.departmentId = row.departmentId
            },
            getAllDepartment(){
                var _this = this
                axios({
                    method:"get",
                    url:"/department/getAllDepartment",
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20041) {
                        _this.departmentList = resp.data.data
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("hospitalLogin.html");
                    }else{
                        alert("失败")
                    }
                })
            },
            selectMedicationByName(){
                var _this = this
                axios({
                    method:"post",
                    url:"/medication/getMedicationByName",
                    data:_this.selectMedication,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20041) {
                        _this.medicationList = resp.data.data
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("hospitalLogin.html");
                    }else{
                        alert("失败")
                    }
                })
            },
            DeleteMedication(index,row){
                var _this = this
                this.deleteMedication.medicationId = row.medicationId
                axios({
                    method:"post",
                    url:"/medication/deleteMedication",
                    data:_this.deleteMedication,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20031) {
                        _this.selectAllMedication()
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("hospitalLogin.html");
                    }else if(resp.data.code == 20030){
                        alert("失败")
                    }
                })
            },
            AddMedication(){
                var _this = this
                axios({
                    method:"post",
                    url:"/medication/addMedication",
                    data:_this.addMedication,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20011) {
                        _this.addMedication.medicationName = ''
                        _this.addMedication.charge = ''
                        _this.selectAllMedication()
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("hospitalLogin.html");
                    }else if(resp.data.code == 20010){
                        alert("失败")
                    }
                })
            },
            selectAllMedication(){
                var _this = this
                axios({
                    method:"get",
                    url:"/medication/getAllMedication",
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20041) {
                        _this.medicationList = resp.data.data
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("hospitalLogin.html");
                    }else {
                        alert("失败")
                    }
                })
            },
            GetDuty(index,row){
                this.duty.doctorId = row.doctorId
            },
            SelectDutyByDate(){
                var _this = this
                axios({
                    method:"post",
                    url:"/duty/getAllDutyByIdAndDate",
                    data:_this.duty,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20041) {
                        _this.selectDuty = resp.data.data
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("hospitalLogin.html");
                    }else {
                        alert("失败")
                    }
                })
            },
            EditDuty(index, row){
                for (let i = 0; i < this.dutyTime.length; i++) {
                    this.dutyTime[i].doctorId = row.doctorId
                    this.dutyTime[i].outpatientName = row.outpatientName
                }
            },
            UpdateDuty(){
                for (let i = 0; i < this.dutyTime.length; i++) {
                    this.dutyTime[i].dutyDate = this.updateDate;
                }
                var _this = this
                axios({
                    method:"post",
                    url:"/duty/updateDuty",
                    data:_this.dutyTime,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20010){
                        alert(resp.data.msg)
                    }else if(resp.data.code == 20011){
                        alert("成功")
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("hospitalLogin.html");
                    }
                })
            },
            AddDoctor(){
                var _this = this
                axios({
                    method:"post",
                    url:"/doctor/addDoctor",
                    data:_this.addDoctor,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20010){
                        alert("失败")
                    }else if(resp.data.code == 20011){
                        _this.addDoctor.doctorName =''
                        _this.addDoctor.position=''
                        _this.addDoctor.outpatientName=''
                        _this.addDoctor.introduction=''
                        _this.addDoctor.userName=''
                        _this.addDoctor.passWord=''
                        _this.addDoctor. charge=''
                        _this.selectAllDoctorByName();
                    }
                })
            },
            UpdateDoctor(){
                var _this = this
                axios({
                    method:"post",
                    url:"/doctor/editDoctor",
                    data:_this.updatedoctor,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20020){
                        alert("失败")
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("hospitalLogin.html");
                    }else if(resp.data.code == 20021){
                        _this.selectAllDoctorByName();
                    }
                })
            },
            selectALlOutpatient(){
                var _this = this;
                axios({
                    method:"get",
                    url:"/outpatient/getAllOutpatient",
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20041){
                        _this.outpatientNames = resp.data.data;
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("hospitalLogin.html");
                    }else{
                        alert("失败")
                    }
                });
            },
            querySearchAsync(queryString, cb) {
                var outpatientNames = this.outpatientNames;
                var results = queryString ? outpatientNames.filter(this.createStateFilter(queryString)) : outpatientNames;

                clearTimeout(this.timeout);
                this.timeout = setTimeout(() => {
                    cb(results);
                }, 3000 * Math.random());
            },
            createStateFilter(queryString) {
                return (state) => {
                    return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                console.log(item);
            },
            EditDoctor(index, row) {
                this.updatedoctor.doctorName = row.doctorName
                this.updatedoctor.position = row.position
                this.updatedoctor.outpatientName = row.outpatientName
                this.updatedoctor.introduction = row.introduction
                this.updatedoctor.userName = row.userName
                this.updatedoctor.passWord = row.passWord
                this.updatedoctor.charge = row.charge
                this.updatedoctor.userId = row.userId
                this.updatedoctor.doctorId = row.doctorId
            },
            selectAllDoctorByName(){
                var _this=this;
                axios({
                    method:"post",
                    url:"/doctor/getAllDoctorByName",
                    data:_this.selectDoctor,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20041){
                        _this.doctorList = resp.data.data;
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("hospitalLogin.html");
                    }else{
                        alert("失败")
                    }
                })
            },
            tableRowClassName({row, rowIndex}) {
                let rindex=rowIndex % 4;
                if (rindex === 1) {
                    return 'warning-row';
                } else if (rindex === 3) {
                    return 'success-row';
                }
                return '';
            },
            Deletedoctor(index, row) {
                var _this=this;
                _this.deleteDoctor.userId = row.userId;
                _this.deleteDoctor.doctorId = row.doctorId;
                axios({
                    method:"post",
                    url:"/doctor/deleteDoctor",
                    data:_this.deleteDoctor,
                    headers: {
                        Authorization: `${token}`
                    }
                }).then(function (resp) {
                    if(resp.data.code == 20030){
                        alert("失败")
                    }else if(resp.data.code == 20031){
                        _this.selectAllDoctorByName();
                    }else if(resp.data.code == 20050){
                        alert(resp.data.msg)
                        window.location.assign("hospitalLogin.html");
                    }
                })
            }
        },
        data() {
            return {
                pickerSelectDate: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() - 1000 * 60 * 60 * 24;
                    }
                },
                pickerUpdateDate: {
                    disabledDate(time) {
                        return time.getTime() < Date.now() + 1000 * 60 * 60 * 24 * 6;
                    }
                },
                updateDate: '',
                updatedoctor:{
                    doctorName: '',
                    position: '',
                    outpatientName: '',
                    introduction: '',
                    userName: '',
                    passWord: '',
                    charge: '',
                    userId: '',
                    doctorId: '',
                },
                tabPosition: 'left',
                selectDuty: [],
                dialogUpdateDoctor: false,
                formLabelWidth: '120px',
                dialogSelectDuty: false,
                dialogUpdateDuty: false,
                startTime: '',
                endTime: '',
                dutyTime: [{
                    doctorId:'',
                    outpatientName:'',
                    dutyDate: new Date(2023,12,4),
                    startTime: new Date(2023,12,5,8, 0),
                    endTime: new Date(2023,12,5, 8, 30),
                    totalNum:'6'
                },{
                    doctorId:'',
                    outpatientName:'',
                    dutyDate: new Date(2023,12,4),
                    startTime: new Date(2023,12,5,8, 30),
                    endTime: new Date(2023,12,5, 9, 0),
                    totalNum:'6'
                },{
                    doctorId:'',
                    outpatientName:'',
                    dutyDate: new Date(2023,12,4),
                    startTime: new Date(2023,12,5,9, 0),
                    endTime: new Date(2023,12,5, 9, 30),
                    totalNum:'6'
                },{
                    doctorId:'',
                    outpatientName:'',
                    dutyDate: new Date(2023,12,4),
                    startTime: new Date(2023,12,5, 9, 30),
                    endTime: new Date(2023,12,5, 10, 0),
                    totalNum:'6'
                },{
                    doctorId:'',
                    outpatientName:'',
                    dutyDate: new Date(2023,12,4),
                    startTime: new Date(2023,12,5, 10, 0),
                    endTime: new Date(2023,12,5, 10, 30),
                    totalNum:'6'
                },{
                    doctorId:'',
                    outpatientName:'',
                    dutyDate: new Date(2023,12,4),
                    startTime: new Date(2023,12,5, 10, 30),
                    endTime: new Date(2023,12,5, 11, 0),
                    totalNum:'6'
                },{
                    doctorId:'',
                    outpatientName:'',
                    dutyDate: new Date(2023,12,4),
                    startTime: new Date(2023,12,5, 11, 0),
                    endTime: new Date(2023,12,5, 11, 45),
                    totalNum:'6'
                },{
                    doctorId:'',
                    outpatientName:'',
                    dutyDate: new Date(2023,12,4),
                    startTime: new Date(2023,12,5, 14, 30),
                    endTime: new Date(2023,12,5, 15, 0),
                    totalNum:'6'
                },{
                    doctorId:'',
                    outpatientName:'',
                    dutyDate: new Date(2023,12,4),
                    startTime: new Date(2023,12,5, 15, 0),
                    endTime: new Date(2023,12,5, 15, 30),
                    totalNum:'6'
                },{
                    doctorId:'',
                    outpatientName:'',
                    dutyDate: new Date(2023,12,4),
                    startTime: new Date(2023,12,5, 15, 30),
                    endTime: new Date(2023,12,5, 16, 0),
                    totalNum:'6'
                },{
                    doctorId:'',
                    outpatientName:'',
                    dutyDate: new Date(2023,12,4),
                    startTime: new Date(2023,12,5, 16, 0),
                    endTime: new Date(2023,12,5, 16, 30),
                    totalNum:'6'
                },{
                    doctorId:'',
                    outpatientName:'',
                    dutyDate: new Date(2023,12,4),
                    startTime: new Date(2023,12,5, 16, 30),
                    endTime: new Date(2023,12,5, 17, 15),
                    totalNum:'6'
                }],
                doctorList: [{
                    doctorName: '',
                    position: '',
                    outpatientName: '',
                    introduction: '',
                    userName: '',
                    passWord: '',
                    charge: '',
                }],
                outpatientNames:[],
                timeout:  null,
                dialogAddDoctor: false,
                selectDoctor:{
                    doctorName: '',
                    outpatientName: '',
                },
                addDoctor:{
                    doctorName: '',
                    position: '',
                    outpatientName: '',
                    introduction: '',
                    userName: '',
                    passWord: '',
                    charge: '',
                },
                deleteDoctor:{
                    userId: '',
                    doctorId: '',
                },
                duty:{
                    doctorId:'',
                    dutyDate:'',
                },
                selectMedication:{
                    medicationName:'',
                },
                medicationList:[],
                dialogAddMedication: false,
                addMedication:{
                    medicationName:'',
                    charge:'',
                },
                deleteMedication:{},
                editDepartment:{},
                departmentList:[],
                dialogAddDepartment: false,
                addDepartment:{},
                dialogEditDepartment:false,
                dialogAddOutpatient:false,
                dialogEditOutpatient:false,
                outpatientList:[],
                chooseDepartment: [],
                editOutpatient:{},
                addOutpatient:{},
            }
        }
    })

</script>

</body>
</html>